<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>

        <input type="checkbox" v-model="hobby" />爱好
        <p>{{hobby}}</p> <!-- 值：true或false-->
        
        <input type="checkbox" v-model="h" />爱好
        <p>{{h}}</p> <!-- 未选中[],选中[null]-->
        
        <input type="checkbox" v-model="loves" value="学习" />学习
        <input type="checkbox" v-model="loves" value="打游戏" />打游戏
        <input type="checkbox" v-model="loves" value="敲代码" />敲代码
        <input type="checkbox" v-model="loves" value="摸鱼" />摸鱼
        <!-- 为选中 [],选中value值 -->
        <p>{{loves}}</p>

        <input type="radio" name="sex" id="">女
        <input type="radio" name="sex" id="">男

        <hr/>

        <!-- radio  v-model给radio分组，因为双向绑定是统一数据
			
            默认为了让单选按钮在一组，相互排斥的功能，会添加name属性，会相同，表示两个单选按钮在同一组
        -->
        <label for="man">
            <input type="radio" v-model="sex" id="man" value="男" />男
        </label>
        
        <label for="wom">
            <input type="radio"  v-model="sex" id="wom" value="女" />女
        </label>
        
        <p>性别：{{sex}}</p>



    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
		 var vm=	new Vue({
				el:"#app",
				data:{ //model
					msg:"好好学习",
					hobby:'',
					h:[],
					loves:[],
					sex:''
				}
			})
		</script>
    
</body>
</html>